<template>
  <div class="IE">
    <el-header
      style="
        height: 68px;
        padding: 14px 50px;
        text-align: left;
        border: 1px solid #ebeef5;
      "
    >
      <div class="p-logo"></div>
      <div class="p-name">{{ $t("platformName") }}</div>
    </el-header>
    <el-main class="overflow-hidden">
      <el-row>
        <el-col class="mt120">
          <i class="el-icon-warning-outline icon26"></i>
          <span class="fs20">
            检测到您当前使用的是Internet Explorer内核的浏览器</span
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col class="mt20">
          <span class="fs18"
            >为达到最佳的体验，建议您使用
            <el-link type="primary" @click="toDownload('Chrome')">Google Chrome</el-link>、
            <el-link type="primary" @click="toDownload('Firefox')">Mozilla Firefox</el-link>、
            <el-link type="primary" @click="toDownload('Edge')"
              >Mircrosoft Edge</el-link
            >
            浏览器</span
          >
        </el-col>
      </el-row>
      <div class="media-container">
        <div class="media-item">
          <el-image
            style="width: 90px; height: 90px; margin: 30px auto 15px"
            :src="icons.Chrome"
            fit="fill"
            @click="toDownload('Chrome')"
          ></el-image>
          <div>Google</div>
          <div>Chrome</div>
        </div>
        <div class="media-item">
          <el-image
            style="width: 90px; height: 90px; margin: 30px auto 15px"
            :src="icons.Firefox"
            fit="fill"
            @click="toDownload('Firefox')"
          ></el-image>
          <div>Mozilla</div>
          <div>Firefox</div>
        </div>
        <div class="media-item">
          <el-image
            style="width: 90px; height: 90px; margin: 30px auto 15px"
            :src="icons.Edge"
            fit="fill"
            @click="toDownload('Edge')"
          ></el-image>
          <div>Mircrosoft</div>
          <div>Edge</div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "IE",
  data() {
    return {
      icons: {
        Chrome: require("../assets/chrome.png"),
        Firefox: require("../assets/firefox.png"),
        Edge: require("../assets/edge.png"),
      },
    };
  },
  methods: {
    toDownload(type) {
      let url = {
        Chrome: "https://chrome.en.softonic.com/",
        Firefox: "http://www.firefox.com.cn/",
        Edge: "https://www.microsoft.com/zh-cn/edge?form=MI13F3&OCID=MI13F3",
      };
      if (url[type]) {
        window.open(url[type]);
      }
    },
  },
};
</script>

<style scoped>
.IE {
  background-color: #ffffff;
  height: 100%;
}
.icon26 {
  font-size: 26px;
  position: relative;
  top: 1.5px;
  color: #ffd000;
}
.fs20 {
  font-size: 20px;
  line-height: 26px;
  color: #606266;
}
.fs18 {
  font-size: 18px;
  line-height: 24px;
  color: #606266;
}
.mt20 {
  margin: 20px 0;
}
.mt120 {
  margin-top: 120px;
}
.media-container {
  margin: 60px auto 0;
  width: 550px;
  display: flex;
  justify-content: space-between;
}
.media-item {
  width: 150px;
  height: 200px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}
.media-item:hover {
  border-color: #409eff;
  box-shadow: 0 0 5px #409eff;
}
</style>